import Taro, { Component } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import _isEmpty from 'lodash/isEmpty'
import { View, Button } from '@tarojs/components'
import { EPage } from 'eft-cool-taro-ui'

import { getMineOrders } from '@/actions/order'
import { getPublicData } from '@/actions/common'

import OrderItem from '@/components/OrderItem'
import AddressSearch from '@/components/AddressSearch'
import BaseButton from '@/components/BaseButton'
import { ModalTop } from '@/components/CustomModal'
import MineOrderFilter from '@/components/MineOrderFilter'
import MineOrderFilterMask from '@/components/MineOrderFilterMask'
import GTagList from '@/components/GTagList'

import './index.scss'

const initState = {id: '000', code: 'sel_all', name: '全部'}
@connect(({ order, common }) => ({
  common,
  order
}))
class MyOrder extends Component {

  config = {
    navigationBarTitleText: '我的订单'
  }

  constructor(props){
    super(props)
    this.state = {
      current: 0,
      searchKey: '',
      orderData: {},
      hasMore: true,
      noMore: false,
      page: 1,
    
      showState: false,
      showType: false,
      selector: '',
      stateList: [],
      typeList: [],
      tempState: initState,
      tempType: initState,
      selState: initState,
      selType: initState,
    }
  }

  componentWillMount(){
   
  }

  componentDidMount(){
   
    Taro.eventCenter.trigger('ERefreshStart')
    this.getOrderData()
    Taro.eventCenter.trigger('ERefreshEnd')
   
  }

  componentWillReceiveProps (nextProps) {
    const { order: { orders }} = nextProps
    
    if(orders.currPage === 1){
      this.setState({ orderData: orders })
      const hasMore = orders.currPage < orders.totalPage
      this.setState({ hasMore, noMore: !hasMore })
    }else{
      const hasMore = orders.currPage <= orders.totalPage
      this.setState({ hasMore, noMore: !hasMore })
      if(hasMore){
        let dList = orders
        dList.list = this.state.orderData.list.concat(dList.list)
        this.setState({
          orderData: dList 
        })
      }
      
    }
   
  }

  render () {
    const { showState, showType, searchKey, orderData, hasMore, noMore, selector, stateList, typeList, tempType, tempState, refreshStatus } = this.state 

    const refresherConfig = {
      recoverTime: 300,
      refreshTime: 1000
    }
  
    return (
      <View className='mine-order-page'>
        <View className="mineorder-list-container">
          <View className="header-wrapper">
            <View className="input-box">
              <AddressSearch
                padding='0'
                value={searchKey}
                onChange={this.changeSearchKey}
              ></AddressSearch>
            </View>
            <View className="search-box">
              <BaseButton
                text="搜索"
                type='primary'
                width={100}
                height={30}
                onClick={this.toSearch}
              ></BaseButton>
            </View>
          </View>
          <View className="filter-wrapper">
            <MineOrderFilter onShowStatusTypeSelector={(selector) => {
              const isType = selector.selected === 'type'
              this.setState({
                visibled: selector.visibled,
                selector: selector.selected,
                showState: !isType && !this.state.showState,
                showType: isType && !this.state.showType
              })
            }}></MineOrderFilter>
          </View>
         
        </View>
        {!_isEmpty(orderData) && !_isEmpty(orderData.list) ? <EPage
          className='mine-order-list'
          onRefresh={this.refresh}
          onLoadMore={this.loadMore}
          noMore={noMore}
          hasMore={hasMore}
          // hasMoreText='loading'
          refresherConfig={refresherConfig}
          refreshStatus={refreshStatus}
        >
          {!_isEmpty(orderData) && orderData.list.map(dl => {
            return (<OrderItem key={dl.id} data={dl}/>)
          })}
        </EPage> : <View className='order-list-empty'>
          <View className='order-list-empty-img'/>
          <View>暂无订单</View>
        </View>}
        <ModalTop
          isOpened={showState}
          renderFooter={(<View className='btns-flex'>
            <BaseButton text='重置' type='grey' circle={false} onClick={() => this.handleStateSelectItem('reset')} />
            <BaseButton text='确认' type='primary' circle={false} onClick={() => this.handleStateSelectItem('submit')} />
          </View>)}
        >
          <GTagList type='small' data={stateList} value={tempState} onClick={this.handleSelectState}/>
        </ModalTop>

        <ModalTop
          isOpened={showType}
          renderFooter={(<View className='btns-flex'>
            <BaseButton text='重置' type='grey' circle={false} onClick={() => this.handleTypeSelectItem('reset')} />
            <BaseButton text='确认' type='primary' circle={false} onClick={() => this.handleTypeSelectItem('submit')} />
          </View>)}
        >
          <GTagList type='small' data={typeList} value={tempType} onClick={this.handleSelectType}/>
        </ModalTop>
      </View>
    )
  }

  refresh = () => {
    this.getOrderData()
    this.setState({
      page: 1,
      refreshStatus: 1
    })

    // 模拟请求
    setTimeout(() => {
      this.setState({
        refreshStatus: 2
      })
    }, Math.random() * 1000)
  }

  refreshLater = () => {
    setTimeout(() => {
      this.refresh()
    }, 1000)
  }

  loadMore = () => {
    const { hasMore } = this.state
    if(hasMore){
      const page = this.state.page + 1
      this.setState(pre => ({ page: pre.page+1 }))
      this.getOrderData(page);
    }
  }

  showSearchList = (path) => {
   
  }

  toPlaceOrder = () => {
    Taro.navigateTo({ url: '/pages/order/index'})
  }

  getOrderData = (page=1) => {  
    const { searchKey, selState, selType } = this.state
    const { dispatch } = this.props
    let params = {
      page,
      limit: 10,
    }
    if(searchKey){
      params.word = searchKey
    }
    if(!_isEmpty(selState) && selState.code !== 'sel_all'){
      params.orderStatusCode = selState.code
    }
    if(!_isEmpty(selType) && selType.code !== 'sel_all'){
      params.trafficTypeCode = selType.code
    }
  }

  changeSearchKey = (val) => {
    this.setState({ searchKey: val })
  }

  toSearch = () =>{
    this.setState({ 
      visibled: false,
      showState: false,
      showType: false,
    })
    this.getOrderData()
  }
  
  handleSelectState = (item) => {
    this.setState({
      tempState: item
    })
  }
  handleStateSelectItem = (type='rest') => {
    console.log('type==', type)
    this.setState({ 
      visibled: false,
      showState: false, 
    })
    if(type==='submit'){
      this.setState({
        selState: this.state.tempState
      }, () => {
        this.getOrderData()
      })
      
    }else{
      this.setState({ 
        selState: initState,
        tempState: initState, 
      }, () => {
        this.getOrderData()
      })
    }
  }

  handleSelectType = (item) => {
    this.setState({
      tempType: item
    })
  }
  handleTypeSelectItem = (type='rest') => {
    console.log('type==', type)
    this.setState({ 
      visibled: false,
      showType: false,
    })
    if(type==='submit'){
      this.setState({
        selType: this.state.tempType
      }, () => {
        this.getOrderData()
      }) 
    }else{
      this.setState({ 
        selType: initState,
        tempState: initState, 
      }, () => {
        this.getOrderData()
      })
    }
  }
}

export default MyOrder
